// TagsView
.app-tagsview {
  white-space: nowrap;
  width: 100%;
  height: 36px;
  line-height: 36px;
  border-bottom: 1px solid #d8dce5;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
  background: #fff;
  .tags-wrap {
    & > li {
      display: inline-block;
      &:first-of-type {
        margin-left: 15px;
        border-left: 1px solid #e1e1e1;
        .ant-tag {
          border: 0;
        }
      }
      &:last-of-type {
        margin-right: 15px;
        border-right: 1px solid #e1e1e1;
      }
      &.tag-home {
        .ant-tag {
          padding: 0 13px;
        }
      }
    }
    .ant-tag {
      line-height: 35px;
      margin-right: 0;
      border: 0;
      border-left: 1px solid #e1e1e1;
      border-radius: 0;
      padding: 0 15px;
      cursor: pointer;
      &:hover {
        background-color: #efefef;
        .anticon-close {
          opacity: 1;
        }
      }
      .anticon-close {
        margin-left: 10px;
        padding: 2px;
        color: #999;
        opacity: 0.6;
        &:hover {
          color: #fff;
          border-radius: 10px;
          background-color: #ccc;
        }
      }
    }
    .tag-active {
      .ant-tag {
        background-color: #42b983;
        color: #fff;
        border-color: #42b983;
        .anticon-close {
          color: #fff;
          &:hover {
            color: #333;
            background-color: #fff;
          }
        }
      }
    }
  }
  .contextmenu {
    margin: 0;
    background: #fff;
    z-index: 3000;
    position: absolute;
    list-style-type: none;
    padding: 5px 0;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 400;
    color: #333;
    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
    li {
      margin: 0;
      padding: 0px 16px;
      height: 30px;
      cursor: pointer;
      &:hover {
        background: #eee;
      }
    }
  }
}
